<template>
    <div class="pager-inline">
        <a-space :size="8">
            <span>共 {{ total }} 条</span>
            <span>第 {{ current }} / {{ totalPages }} 页</span>
            <span>每页 {{ pageSize }} 条</span>
            <a-button size="small" @click="open = true">设置分页</a-button>
        </a-space>

        <a-modal v-model:open="open" title="设置分页" :width="520" :maskClosable="false" @ok="onConfirm">
            <a-form layout="vertical">
                <a-form-item label="每页条数">
                    <a-select :value="draftPageSize" style="width: 160px" :options="sizeOptions"
                        @update:value="(v) => draftPageSize = Number(v)" />
                </a-form-item>

                <a-form-item label="跳转到页">
                    <div style="display:flex; align-items:center; gap:12px;">
                        <a-slider :min="1" :max="totalPages" v-model:value="draftPage" style="flex:1;" />
                        <a-input-number :min="1" :max="totalPages" :value="draftPage"
                            @update:value="(v) => draftPage = Number(v || 1)" />
                        <a-button @click="jump">跳转</a-button>
                    </div>
                    <div style="margin-top:6px;color:#8c8c8c;">当前：第 {{ current }} 页 / 共 {{ totalPages }} 页</div>
                </a-form-item>

                <a-space>
                    <a-button @click="prev" :disabled="current <= 1">上一页</a-button>
                    <a-button @click="next" :disabled="current >= totalPages">下一页</a-button>
                </a-space>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";

const props = defineProps<{
    current: number;
    pageSize: number;
    total: number;
    pageSizeOptions: (string | number)[];
}>();
const emit = defineEmits<{
    (e: "change", page: number, pageSize: number): void;
    (e: "sizeChange", current: number, size: number): void;
}>();

const totalPages = computed(() => Math.max(1, Math.ceil((props.total || 0) / (props.pageSize || 1))));
const sizeOptions = computed(() => (props.pageSizeOptions || []).map(v => ({ label: String(v), value: Number(v) })));

const open = ref(false);
const draftPage = ref(props.current || 1);
const draftPageSize = ref(props.pageSize || 10);

/** 同步外部变更 */
watch(() => [props.current, props.pageSize], () => {
    draftPage.value = props.current || 1;
    draftPageSize.value = props.pageSize || 10;
});

/** 操作 */
const onConfirm = () => {
    emit("change", normalizePage(draftPage.value, draftPageSize.value), draftPageSize.value);
};
const jump = () => {
    emit("change", normalizePage(draftPage.value, draftPageSize.value), draftPageSize.value);
};
const prev = () => {
    emit("change", Math.max(1, props.current - 1), props.pageSize);
};
const next = () => {
    emit("change", Math.min(totalPages.value, props.current + 1), props.pageSize);
};

function normalizePage(p: number, size: number) {
    const pages = Math.max(1, Math.ceil(props.total / Math.max(1, size)));
    const page = Math.min(Math.max(1, p || 1), pages);
    if (size !== props.pageSize) emit("sizeChange", page, size);
    return page;
}
</script>

<style scoped>
.pager-inline {
    display: inline-flex;
    align-items: center;
}
</style>
